<template>
    <div>
      <el-menu
        background-color="#304157"
        text-color="#b1becd"
        active-text-color="#336cab"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="1" v-if="role === 1 || role === 2">
          <template #title>
            <el-icon><House /></el-icon>
            <router-link to='/home' class="menu-link">ホームページ</router-link>
          </template>
        </el-menu-item>
  
        <el-sub-menu index="2" v-if="role === 1 || role === 2">
          <template #title>
            <el-icon><User /></el-icon>
            <span>利用者変更</span>
          </template>
          <el-menu-item index="2-1">
            <router-link to='/user/update' class="menu-link" >利用者情報変更</router-link>
          </el-menu-item>
          <el-menu-item index="2-2">
            <router-link to='/user/detailList' class="menu-link" >利用者変更履歴一覧</router-link>
          </el-menu-item>
        </el-sub-menu>
  
        <el-sub-menu index="3" v-if="role === 1">
          <template #title>
            <el-icon><CreditCard /></el-icon>
            <span>カード変更</span>
          </template>
          <el-menu-item index="3-1">
            <router-link to='/card/apply' class="menu-link">カード利用状況</router-link>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { CreditCard, House, User } from '@element-plus/icons-vue'
  import { ref, onMounted } from 'vue';
  import { getRoleId } from '@/apis/user';
  import { ElMessage } from 'element-plus';
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
// 定义一个角色ID的状态
const role = ref<number | null>(null);

  onMounted(() => {
    fetchRole();
});

// 获取列表数据
function fetchRole() {
  getRoleId().then((res) => {
        if (res.data.code === 200) {
          // 设置角色ID
          role.value = res.data.data;
          console.log('res========>', res);
        }
    }).catch((error) => {
        ElMessage.error('ユーザー情報を取得中にエラーが発生しました。');
        console.error('请求失败', error);
    });
}

  </script>
  
  <style lang="scss">
  .menu-link {
    text-decoration: none;
    color: inherit; /* 继承父元素的颜色 */
  
    /* 覆盖router-link的默认样式 */
    &:link, 
    &:visited, 
    &:hover, 
    &:active {
      color: inherit; /* 继承父元素的颜色 */
    }
  }
  
  /* 设置el-menu-item的激活状态 */
  .el-menu-item.is-active .menu-link {
    color: #336cab !important;
  }
  </style>
  